<template>
  <div class="page-container">
    <van-nav-bar
      title="用户协议"
      left-text=""
      right-text=""
      left-arrow
      style="background-color: #f5f5f5"
      @click-left="onClickLeft"
    />
    <div class="agreement-text" v-html="text" />
  </div>
</template>

<script>
import { getAgreement } from '@/utils/agreement'
import { Button, Card, Tag, Field, Form, Toast } from 'vant'
export default {
  name: 'Home',
  components: {
    [Button.name]: Button,
    [Card.name]: Card,
    [Tag.name]: Tag,
    [Field.name]: Field,
    [Form.name]: Form,
    [Toast.name]: Toast
  },
  data() {
    return {
      text: getAgreement()
    }
  },
  created() {},
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.page-container {
  background-color: #ffffff;
  overflow: auto;
}
// vant ui navbar底部出现白线问题 https://www.jianshu.com/p/810419c02382
.van-hairline--bottom:after {
  border-bottom-width: 0px;
}
::v-deep .van-nav-bar__arrow {
  color: #000000;
}

.agreement-text {
  padding: 10px;
  font-size: 13px;
}
</style>
